<template>
  <div>
    <div class="housr_temp">
        <div class="temp_list">
          <div class="list_one" v-for="(item,index) in hourly_forecasts" :key="index">
            <div>{{item.hour=='现在'?'现在':item.hour+':00'}}</div>
            <div>
              <img :src="item.imgurl" alt="">
            </div>
          </div>
        </div>
    </div>
     <!-- 折线 -->
        <div id="lineChart">

        </div>
  </div>
</template>

<script>
export default {
  name: '2209vueSwiperHours',

  data() {
    return {
      xArr:[],
      yArr:[]
    };
  },
  props:{
    hourly_forecast:{ //每小时天气
      type:Array, 
      default(){
        return []
      }
    }
  },
  computed:{
    hourly_forecasts(){
      let arr=this.hourly_forecast.map(item=>{
        console.log(new Date().getHours(),"-----")
        if(item.hour==new Date().getHours()){
            item.hour="现在"
        }
        if(item.weather_icon_id=='0'){
          item.imgurl="https://gips3.baidu.com/it/u=2101432901,1526676003&fm=3028&app=3028&f=PNG&fmt=auto&q=100&size=f84_84"
        }else if(item.weather_icon_id=='1'){
          item.imgurl="https://gips2.baidu.com/it/u=4212037040,745107134&fm=3028&app=3028&f=PNG&fmt=auto&q=100&size=f84_84"
        }else if(item.weather_icon_id=='7'){
          item.imgurl="https://gips0.baidu.com/it/u=1902660603,3821770875&fm=3028&app=3028&f=PNG&fmt=auto&q=100&size=f84_84"
        }else{
          item.imgurl="https://gips3.baidu.com/it/u=2471441282,2172258151&fm=3028&app=3028&f=PNG&fmt=auto&q=100&size=f84_84"
        }
        return item
      })
      console.log(arr)
        return arr
    }
  },
  watch:{ //监听子传父的数据
    hourly_forecast:{
      handler(newVal){
        if(newVal.length!=0){
          this.xArr=newVal.map(item=>item.hour);
          this.yArr=newVal.map(item=>item.temperature)
      
                 this.makeChart(this.xArr,this.yArr)
      
        }
      },
      deep:true
    }
  },
  mounted() {
     
        
  },
  methods: {
    makeChart(xArr,yArr){
      console.log(xArr,yArr)
      let myChart=this.$echarts.init(document.getElementById("lineChart"))

      console.log(myChart,"-------------")
      let option = {
        //  title:{
        //   text:"每小时温度",
        //   subtext:"由百度天气提供",
        //   left:"50%",
        //   textStyle:{
        //     color:"#ff0000"
        //   }
        //  },
         
        grid:{ // 直角坐标系内绘图网格
            show: false, // 是否显示直角坐标系网格。[ default: false ]
            left: "0", // grid 组件离容器左侧的距离。
            right: "0",
            borderColor: "#333", //网格的边框颜色
            bottom: "20%" // 距离容器底部的间距
        },
        xAxis: { 
          type: 'category',
          data: xArr,
           show:false
        },
        yAxis: {
          type: 'value',
          show:false
        },
        series: [
         
          {
             lineStyle: { //线的颜色
                color: '#ffffff'   
              },
              itemStyle:{ 
                color:"#ffffff"
              },
              symbolSize: 8,//拐点大小
              label: { //折线上方显示文字
                normal: {
                    // formatter:"{c}°", //{a}{b}{c} {b}x轴{c}y轴
                    formatter(item){ //自定义整理
                      console.log(item,"-----")
                      return `${item.value+'°'}`
                    },
                    show: true,
                    position: 'top',
                    textStyle: {
                        color: '#ffffff'
                    }
                }
            },
            data: yArr,
            type: 'line'
          },
          // {
          //   data:[9,10,9,11,20,16,13,23,23],
          //   type: 'bar'
          // }
        ]
      };
      myChart.setOption(option)

    }
  },
};
</script>
<style lang="less">
  .housr_temp{
  width: 100%;
  .temp_list{
    display: flex;
    justify-content: space-between;
    .list_one{
      width: 145px;
      height: 80px;
      color: white;
      font-size: 24px;
      text-align: center;
      img{
        width: 70px;
        height: 70px;
      }
      div{
        margin-top: 10px;
      }
    }
  }
}
#lineChart{
  width:792px;
  height:200px;
  margin:0 auto;
}
</style>